<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Table</title>
</head>
<body>
    <div class="table-div">
        <div class="services-provided">
            <table>
                <caption>Оказанные услуги</caption>
                <tr class="header-row">
                    <th>ID</th>
                    <th>Date</th>
                    <th>Client ID</th>
                    <th>Service ID</th>
                </tr>
                <tr class="row">
                    <td>1</td>
                    <td>01.08.2023</td>
                    <td>3</td>
                    <td>5</td>
                </tr>
                <tr class="row">
                    <td>2</td>
                    <td>01.09.2023</td>
                    <td>2</td>
                    <td>4</td>
                </tr>
                <tr class="row">
                    <td>3</td>
                    <td>01.09.2023</td>
                    <td>4</td>
                    <td>1</td>
                </tr>
                <tr class="row">
                    <td>4</td>
                    <td>01.11.2023</td>
                    <td>5</td>
                    <td>3</td>
                </tr>
                <tr class="row">
                    <td>5</td>
                    <td>01.13.2023</td>
                    <td>2</td>
                    <td>4</td>
                </tr>
                <tr class="row">
                    <td>6</td>
                    <td>01.14.2023</td>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr class="row">
                    <td>7</td>
                    <td>01.14.2023</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr class="row">
                    <td>8</td>
                    <td>01.16.2023</td>
                    <td>3</td>
                    <td>1</td>
                </tr>
                <tr class="row">
                    <td>9</td>
                    <td>01.17.2023</td>
                    <td>5</td>
                    <td>1</td>
                </tr>
                <tr class="row">
                    <td>10</td>
                    <td>01.20.2023</td>
                    <td>1</td>
                    <td>3</td>
                </tr>
            </table>
        </div>
        <div class="services">
            <table>
                <caption>Услуги</caption>
                <tr class="header-row">
                    <th>Service ID</th>
                    <th>Name</th>
                    <th>Cost</th>
                </tr>
                <tr class="row">
                    <td>1</td>
                    <td>Хостинг</td>
                    <td>150</td>
                </tr>
                <tr class="row">
                    <td>2</td>
                    <td>Телевидение</td>
                    <td>450</td>
                </tr>
                <tr class="row">
                    <td>3</td>
                    <td>Видеонаблюдение</td>
                    <td>200</td>
                </tr>
                <tr class="row">
                    <td>4</td>
                    <td>Интернет 100МБит</td>
                    <td>300</td>
                </tr>
                <tr class="row">
                    <td>5</td>
                    <td>Установка антивируса</td>
                    <td>75</td>
                </tr>
            </table>
        </div>
        <div class="clients">
            <table>
                <caption>Клиенты</caption>
                <tr class="header-row">
                    <th>Client ID</th>
                    <th>District</th>
                    <th>Address</th>
                    <th>2nd name</th>
                </tr>
                <tr class="row">
                    <td>1</td>
                    <td>Речной</td>
                    <td>Флотская, 140</td>
                    <td>Давыдова Д.К.</td>
                </tr>
                <tr class="row">
                    <td>2</td>
                    <td>Новый</td>
                    <td>Ленина, 128</td>
                    <td>Егоров Э.М.</td>
                </tr>
                <tr class="row">
                    <td>3</td>
                    <td>Полярный</td>
                    <td>Петровская, 143</td>
                    <td>Панфилова Л.Е.</td>
                </tr>
                <tr class="row">
                    <td>4</td>
                    <td>Новый</td>
                    <td>Лесная, 32</td>
                    <td>Матвеева И.С.</td>
                </tr>
                <tr class="row">
                    <td>5</td>
                    <td>Речной</td>
                    <td>Октябрьская, 65</td>
                    <td>Орехов В.Д.</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="buy-div">
        <div class="order">
                <h1 class="header-buy">Заказать услугу</h1>
                <div class="order-service">
                    <div class="step">
                        <div class="step-circle">1</div>
                        <h1>Выберите услугу</h1>
                    </div>
                    <div class="serv-choose">
                        <div class="checkbox">
                            <input type="checkbox" class="check" name="interest" value="coding" />
                            <label for="check">Хостинг</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="check" name="interest" value="coding" />
                            <label for="coding">Телевидение</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="check" name="interest" value="coding" />
                            <label for="coding">Видеонаблюдение</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="check" name="interest" value="coding" />
                            <label for="coding">Интернет 100МБит</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="check" name="interest" value="coding" />
                            <label for="coding">Установка антивируса</label>
                        </div>
                    </div>
                    <div>
                        <div class="step-circle">2</div>
                        <h1>Укажите адрес</h1>
                    </div>
                    <div>
                        <div class="step-circle">3</div>
                        <h1>Укажите номер карты</h1>
                    </div>
                    <div>
                        <div class="step-circle">4</div>
                        <h1>Укажите CVC/CVV код карты</h1>
                    </div>
                </div>
        </div>

        <div class="pay">
            <h1 class="header-buy">Итого</h1>
        </div>
    </div>
</body>
</html>